import React from "react";
import { ScrollView, StyleSheet, Text } from "react-native";
import BasePage from "../BasePage";
import ViewUtils from "../../utils/ViewUtils";
import NavigationBar from "../common/NavigationBar";
import { commonStyles } from "../../configs/commonStyle";
import { inject, observer } from "mobx-react";
import { Button, TextField, TouchableOpacity, View } from "react-native-ui-lib";
import ToastUtils from "../../utils/ToastUtils";
import Events from "../../utils/events";
import ReasonListDialog from "../common/ReasonListDialog";
import api from "../../net/api";
import { logger } from "../../utils/util";


/**
 * 配送异常
 */
@inject("userStore")
@observer
export default class DeliveryException extends BasePage {
  constructor(props) {
    super(props);
    this.state = {
      content: "",
      dataList: [{ imgPath: "" }],
      size: 0,
      reasonType: 0,
      reports: [// 报备
        { label: "联系不上地址详细", checked: false },
        { label: "联系不上地址不详细", checked: false },
        { label: "卡点", checked: false },
        { label: "客户拒收", checked: false },
        { label: "仓库无配件", checked: false },
        { label: "生产超时", checked: false },
        { label: "中转超时", checked: false },
        { label: "电话空号/过期/错误", checked: false },
      ],
      innerReasons: [// 经理处理
        { label: "找不到蛋糕", checked: false },
        { label: "蛋糕丢失", checked: false },
        { label: "蛋糕融化", checked: false },
        { label: "蛋糕损坏", checked: false },
        { label: "车辆故障", checked: false },
        { label: "无法点击签收", checked: false },
        { label: "配送不满足需重新安排", checked: false },
        { label: "更换配送员", checked: false },
      ],
      customerReasons: [// 客服处理
        { label: "客户修改地址", checked: false },
        { label: "定位错误", checked: false },
        { label: "修改时间", checked: false },
        { label: "款式错误", checked: false },
        { label: "磅数错误", checked: false },
        { label: "有异物", checked: false },
        { label: "客户反馈未订购蛋糕", checked: false },
        { label: "配件已沟通退款", checked: false },
        { label: "其它", checked: false },
      ],
    };
  }

  // componentDidMount() {
  //   super.componentDidMount();
  //   this.getDictInfo();
  // }

  // getDictInfo = () => {
  //   axios.get(api.getDictInfo, {
  //     params: {
  //       dictCode: "",
  //       showLoading: true,
  //     },
  //   })
  //     .then(res => {
  //       this.setState({ dictList: res.result.dictList || [] });
  //     }).catch(e => {
  //     logger("e:", e);
  //     e.msg && ToastUtils.showFailInfo(e.msg);
  //   });
  // };

  addOrderDeliveryAbnormal = () => {
    const { ordNo } = this.props.navigation.state.params;
    const { userInfo } = this.props.userStore;
    const { content, reports, innerReasons, customerReasons } = this.state;
    const report = reports.find(data => data.checked);
    const customer = customerReasons.find(data => data.checked);
    const reasons = innerReasons.find(data => data.checked);
    if (IsNullOrEmpty(report) && IsNullOrEmpty(customer) && IsNullOrEmpty(reasons)) {
      ToastUtils.showFailInfo("请选择修改原因");
      return;
    }
    if (IsNullOrEmpty(content)) {
      ToastUtils.showFailInfo("请填写说明");
      return;
    }
    let params = {
      token: global.token,
      orderId: ordNo,
      delivery: userInfo.name,
      // customerContact: concnect.label || "",
      updateContent: content,
      showLoading: true,
    };
    if (!IsNullOrEmpty(report)) {
      params["code"] = "REPORT";
      params["deliveryUnusualReason"] = report.label;
    } else if (!IsNullOrEmpty(reasons)) {
      params["code"] = "MANAGER";
      params["deliveryUnusualReason"] = reasons.label;
    } else if (!IsNullOrEmpty(customer)) {
      params["code"] = "CUSTOMER";
      params["deliveryUnusualReason"] = customer.label;
    }
    axios.post(api.addOrderDeliveryAbnormal, params)
      .then(res => {
        logger("订单详情", res);
        ToastUtils.showSuccessInfo("提交成功");
        Events.publish("RefreshTimeOutOrderList");
        this._onBackPress();
      })
      .catch(e => {
        logger("error", e);
        e.msg && ToastUtils.showFailInfo(e.msg);
      });
  };

  checkReason = (checkedItem) => {
    const { reports, innerReasons, customerReasons } = this.state;
    reports.forEach(item => {
      item.checked = false
    })
    innerReasons.forEach(item => {
      item.checked = false
    })
    customerReasons.forEach(item => {
      item.checked = false
    })
    checkedItem.checked = true
    this.setState({reports, innerReasons, customerReasons})
  }

  render() {
    const { ordNo, invoiceHeader } = this.props.navigation.state.params;
    const { content, reports, customerReasons, innerReasons } = this.state;
    return (
      <View useSafeArea style={commonStyles.body_primary}>
        <NavigationBar
          leftButton={ViewUtils.getLeftButton(() => this._onBackPress())}
          backgroundColor={"transparent"}
          title={"配送异常"} />
        <View style={commonStyles.container}>
          <ScrollView style={commonStyles.scrollStyle}>

            <View style={styles.titleWrap}>
              <Text style={commonStyles.text_black_14}>单号：{ordNo}</Text>
              <Text style={commonStyles.text_black_14}>{invoiceHeader}</Text>
            </View>

            <View style={styles.contentWrap}>
              <View marginT-10>
                <Text style={commonStyles.text_black_13}>修改原因：</Text>
              </View>
              <View marginT-10>
                <Text style={commonStyles.text_black_13}>报备：</Text>
              </View>
              <View marginT-10 style={{ flexDirection: "row", flexWrap: "wrap" }}>
                {reports.map((data, index) => {
                  return (
                    <TouchableOpacity activeOpacity={1}
                                      onPress={() => this.checkReason(data)}
                                      style={{
                                        backgroundColor: data.checked ? "#F9D63B" : "white",
                                        borderColor: data.checked ? "#F9D63B" : "#CCCCCC",
                                        ...styles.tagWarp,
                                      }}>
                      <Text style={{ fontSize: 14, color: data.checked ? "#555555" : "#AAAAAA" }}>{data.label}</Text>
                    </TouchableOpacity>
                  );
                })}

              </View>
              <View marginT-10>
                <Text style={commonStyles.text_black_13}>经理处理：</Text>
              </View>
              <View marginT-10 style={{ flexDirection: "row", flexWrap: "wrap" }}>
                {innerReasons.map((data, index) => {
                  return (
                    <TouchableOpacity activeOpacity={1}
                                      onPress={() => this.checkReason(data)}
                                      style={{
                                        backgroundColor: data.checked ? "#F9D63B" : "white",
                                        borderColor: data.checked ? "#F9D63B" : "#CCCCCC",
                                        ...styles.tagWarp,
                                      }}>
                      <Text style={{ fontSize: 14, color: data.checked ? "#555555" : "#AAAAAA" }}>{data.label}</Text>
                    </TouchableOpacity>
                  );
                })}

              </View>
              <View marginT-10>
                <Text style={commonStyles.text_black_13}>客服处理：</Text>
              </View>
              <View marginT-10 style={{ flexDirection: "row", flexWrap: "wrap" }}>
                {customerReasons.map((data, index) => {
                  return (
                    <TouchableOpacity activeOpacity={1}
                                      onPress={() => this.checkReason(data)}
                                      style={{
                                        backgroundColor: data.checked ? "#F9D63B" : "white",
                                        borderColor: data.checked ? "#F9D63B" : "#CCCCCC",
                                        ...styles.tagWarp,
                                      }}>
                      <Text style={{ fontSize: 14, color: data.checked ? "#555555" : "#AAAAAA" }}>{data.label}</Text>
                    </TouchableOpacity>
                  );
                })}

              </View>
              <View marginT-10>
                <Text style={commonStyles.text_black_13}>修改说明：</Text>
              </View>
              <View style={styles.content}>
                <TextField
                  multiline
                  hideUnderline
                  black333
                  maxLength={300}
                  defaultValue={content}
                  placeholder={"请填写"}
                  text12
                  style={{ minHeight: 80, textAlignVertical: "top", fontSize: 13 }}
                  onChangeText={content => this.setState({ content })}
                  showCharacterCounter={true}
                />
              </View>
            </View>
          </ScrollView>
          <View>
            <Button label={"提交"} style={styles.btn} labelStyle={commonStyles.text_black}
                    onPress={this.addOrderDeliveryAbnormal} />
          </View>
        </View>
        <ReasonListDialog ref={r => this.reasonListDialog = r}
                          callBack={(reasonType) => this.setState({ reasonType })} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  btn: {
    borderRadius: 4,
    margin: 15,
  },
  btnWrap: {
    marginTop: 15,
    marginHorizontal: 15,
  },
  titleWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    backgroundColor: "#F9D63B",
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 10,
    marginTop: 15,
  },

  contentWrap: {
    borderBottomLeftRadius: 4,
    borderBottomRightRadius: 4,
    backgroundColor: "white",
    marginHorizontal: 15,
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  itemWrap: {
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 6,
  },
  content: {
    padding: 10,
    borderRadius: 5,
    backgroundColor: "white",
    marginTop: 10,
    marginBottom: 6,
    borderWidth: 1,
    borderColor: "#CCCCCC",
  },
  item_no_border: {
    alignItems: "center",
    justifyContent: "center",
    height: 96,
    width: 96,
    backgroundColor: "white",
    borderRadius: 12,
  },
  item_border: {
    alignItems: "center",
    justifyContent: "center",
    height: 96,
    width: 96,
  },
  add_icon: { width: 48, height: 48 },
  img: { width: 87, height: 87 },
  dateWrap: {
    flexDirection: "row",
    alignItems: "center",
    height: 40,
    justifyContent: "space-between",
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "#CCCCCC",
    paddingHorizontal: 10,
    backgroundColor: "white",
    marginHorizontal: 15,
  },
  infoWrap: {
    backgroundColor: "white",
    marginHorizontal: 15,
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    marginTop: 10,
  },
  tagWarp: {
    borderWidth: 1,
    borderRadius: 4,
    padding: 10,
    marginRight: 10,
    marginBottom: 10,
  },

});
